
<script setup lang="ts">

import { ref} from "vue";
import { ApiRole } from "../../api";
import { Delete, Edit, Plus, Setting } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {useRoleStore} from '../../store'
import RoleAdd from "./RoleAdd.vue";
import RoleUpdate from "./RoleUpdate.vue";
import RoleConfig   from "./RoleConfig.vue";
import { storeToRefs } from "pinia";


const {list}=storeToRefs(useRoleStore())
const {queryHandler}=useRoleStore()
const addRef=ref<InstanceType<typeof RoleAdd>>()
const updateRef=ref<InstanceType<typeof RoleUpdate>>()
const configRef=ref<InstanceType<typeof RoleConfig>>()
const cardBodyStyle = {
  height: "130px",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  borderRadius: "10px",
  backgroundColor: "#4ea8f8",
  cursor: "pointer",
};
const removeHandler=async(id:number)=>{
    await ElMessageBox.confirm("确定要删除吗？", "提示", { type: "warning" });
    await ApiRole.remove(id)
queryHandler()
}
const addHandler=async()=>{
 queryHandler()

}
const configHandler=async(model:API.Role.Config)=>{
  await ApiRole.config(model)
  queryHandler()
  configRef.value?.end()
  ElMessage.success("配置分配成功")

}
</script>

<template>
<el-row gutter="30">
    <el-col :span="6" v-for="item in list" :key="item.role_id" >
<el-card :body-style="cardBodyStyle">
    <el-icon><user /></el-icon>
    <h5>{{ item.role_name }}</h5>
    <div class="mask">
          <el-button :icon="Edit" @click="updateRef?.begin(item)">编辑</el-button>
          <el-button :icon="Setting" @click="configRef?.begin(item.role_id)">功能分配</el-button>
          <el-button :icon="Delete"  @click="removeHandler(item.role_id)">删除</el-button>
        </div>
</el-card>

    </el-col>
    <el-col :span="6">
        <el-card :body-style="cardBodyStyle" @click="addRef?.begin()">
    <el-icon><Plus/></el-icon>
</el-card>
    </el-col>
</el-row>
<role-add ref="addRef" @save="addHandler"></role-add>
<role-update ref="updateRef" @save="addHandler"></role-update>
<role-config ref="configRef" @save="configHandler"></role-config>
</template>


<style scoped lang="scss">
.el-col {
  margin-bottom: 20px;
  .el-card {
    position: relative;
    border-radius: 10px;
    h5 {
      font-size: 20px;
      color: #fff;
      font-weight: normal;
    }
    i {
      font-size: 24px;
      color: #fff;
      font-weight: 400;
      margin-right: 15px;
    }
    &:hover .mask {
      display: flex;
    }
    .mask {
      display: none;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
      justify-content: center;
      align-items: center;
      .el-button {
        color: #4ea8f8;
        cursor: pointer;
        &:hover {
          transform: scale(1.1);
          color: #ffd04b;
        }
      }
    }
  }
}

</style>